<template>
  <div class="app-container">
    <div>
      <el-tabs
        v-model="activeName"
        type="card"
        @tab-click="handleClick"
      >
        <el-tab-pane
          label="表格"
          name="first"
        ></el-tab-pane>
        <el-tab-pane
          label="图表"
          name="second"
        ></el-tab-pane>
      </el-tabs>
    </div>
    <div class="filter-container">
      <div>
        <!-- <div class="lz-tips">
          <label>用户ID:</label>
        </div>
        {{$route.query.userId}}

        <div class="lz-tips">
          <label>昵称:</label>
        </div>
        {{$route.query.nickName}}
        <div class="lz-tips">
          <label>手机号:</label>
        </div> -->
        {{$route.query.userName}}
        <div class="lz-tips">
          <label>时长:</label>
        </div>
        {{crpInfo.duration}}分钟
        <div class="lz-tips">
          <label>备注:</label>
        </div>
        {{crpInfo.note}}

      </div>
    </div>

    <div v-if="activeName === 'first' ">
      <Table :table="dataTable">
        <template
          slot-scope="props"
          slot="computeTime"
        >
          <span>{{props.obj.row.computeTime[0]}}</span>
          <span class="time">{{props.obj.row.computeTime[1]}}</span>
        </template>
      </Table>
      <div
        class="Pagination"
        style="text-align: left;margin-top: 10px;"
      >
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-size="limit"
          layout="total, prev, pager, next"
          :total="count"
        >
        </el-pagination>
      </div>
    </div>

    <div v-if="activeName === 'second' ">
      <easyChart
        :id="'adc6'"
        :data='detailData'
      ></easyChart>
      <easyChart
        :id="'adc7'"
        :data='detailData1'
      ></easyChart>
    </div>
  </div>
</template>
<script>
import { fetchDetail, fetchEchartDetail } from "@/api/table";
import format from "date-format";
import { formatDateTime, getStore } from "@/utils/common";
import Table from "@/components/Table/index";
import easyChart from "@/components/EasyChart";

export default {
  data() {
    return {
      //分页默认值
      activeName: "first",
      //表格数据
      dataTable: {
        loading: false,
        border: true,
        hasOperation: true,
        tr: [
          {
            id: "1",
            label: "检测时间",
            prop: "computeTime",
            show: "template"
          },
          {
            id: "5",
            label: "数据",
            prop: "adc6",
            show: true
          }
        ],
        data: [],
        operation: {}
      },
      //搜索
      searchInpt: "",
      searchLoading: false,
      //总页码
      count: 0,
      //单页行数
      limit: 20,
      //页码
      currentPage: 1,
      topTime: "",
      active2: 0,
      computeTime: [],
      dac: [],
      adc6: [],
      adc7: [],
      clcValue: [],
      gapTime: [],
      detailData: {},
      detailData1: {},
      detailData3: {},
      crpInfo: {}
    };
  },
  components: {
    Table,
    easyChart
  },
  mounted() {
    this.initData();
  },
  methods: {
    initData() {
      if (this.crpInfo) {
        this.crpInfo = JSON.parse(getStore("crp-info"));
      } else {
        this.crpInfo;
      }
      this.getQueryDetailList();
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.getQueryDetailList();
    },
    search() {
      this.currentPage = 1;
      this.pageshow = false;
      this.getQueryDetailList();
      this.$nextTick(() => {
        this.pageshow = true;
      });
    },
    handleClick(tab, event) {
      if (tab.index === "0") {
        this.getQueryDetailList();
      } else {
        this.getEchartData();
      }
    },
    //时间格式化
    formatterTime(t) {
      if (t) {
        const newTime = format("yyyy-MM-dd hh:mm:ss", new Date(t)).split(" ");
        return newTime;
      } else {
        return "";
      }
    },
    async getQueryDetailList() {
      const userName = getStore("userName");
      this.dataTable.hasOperation = false;
      this.dataTable.loading = true;
      this.searchLoading = true;
      const res = await fetchDetail({
        pageSize: this.limit,
        pageNo: this.currentPage,
        id: this.$route.query.id
      });
      this.searchLoading = false;
      this.dataTable.loading = false;
      this.dataTable.data = [];
      this.count = res.data.total;
      res.data.list.forEach(item => {
        const data = {};
        data.time = item.time;
        data.dac = item.dac;
        data.adc6 = item.adc6;
        data.adc7 = item.adc7;
        data.clcValue = item.clcValue;
        data.computeTime = this.formatterTime(item.computeTime);
        this.dataTable.data.push(data);
      });
    },
    async getEchartData() {
      const res = await fetchEchartDetail({
        id: this.$route.query.id
      });
      this.computeTime = [];
      this.adc6 = [];
      this.adc7 = [];
      this.dac = [];
      this.clcValue = [];
      this.gapTime = [];
      let gap = 0;
      res.data.forEach(item => {
        const data = {};
        data.time = item.time;
        data.dac = item.dac;
        data.adc6 = item.adc6;
        data.adc7 = item.adc7;
        data.clcValue = item.clcValue;
        data.computeTime = this.formatterTime(item.computeTime);
        gap = gap + Number(this.crpInfo.gap);
        this.gapTime.push(gap);
        this.adc6.push(data.adc6);
        this.adc7.push(data.adc7);
        this.clcValue.push(data.clcValue);
        this.dac.push(data.dac);
      });

      let minSiz = this.minNumber(this.adc6);
      let maxSiz = this.maxNumber(this.adc6);
      this.detailData = {
        tooltip: {
          trigger: "axis"
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "15%",
          containLabel: true
        },

        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.gapTime,
          axisLine: { onZero: false }
        },
        yAxis: {
          type: "value",
          min: minSiz,
          max: maxSiz,
          axisLine: { onZero: false }
        },
        dataZoom: [
          {
            type: "slider",
            xAxisIndex: 0,
            filterMode: "empty"
          },
          {
            type: "slider",
            yAxisIndex: 0,
            filterMode: "empty",
            startValue: maxSiz,
            endValue: minSiz
          }
        ],
        series: [
          {
            name: "数据",
            type: "line",
            innerSize: "80%",
            smooth: true,
            showSymbol: false,
            hoverAnimation: false,
            data: this.adc6
          }
        ]
      };
    },
    maxNumber(number) {
      const maxNumber = Math.max(...number);
      const newNumber = Math.ceil(maxNumber / 10) * 10;
      return newNumber;
    },
    minNumber(number) {
      const minNumber = Math.min(...number);
      const newNumber = Math.floor(minNumber / 10) * 10;
      return newNumber;
    },
    goPage(url, data) {
      this.$router.push({ path: url, query: { userId: data } });
    }
  }
};
</script>
<style lang="less" scoped>
.demo-image__lazy {
  height: 400px;
  overflow-y: auto;
  img {
    width: 100%;
  }
}
.time {
  margin-left: 20px;
}
</style>
